<script>
export default {
  name: "airsorder",
  data() {
    return {
      checked: true,
      labelPosition: 'right',
      user: {
        username: '',
        userTel: '',
        usertype: ''
      },
      air:{
        airId: '',
        airSaddr: '',
        airEaddr: '',
        airSpace:'',
        airPrice:'',
        airStatus:'',
        airStime: '',
        airEtime: '',
        airNumber: '',
        ariType: '',
        ariName:''
      },
    };
  },
  methods: {
    onSubmit(){
      this.$axios.post('/air/buy')
    },
    findById(airId){
      this.$axios.get('/air/findOne',{
        params:{
          airId:airId,
        }
      }).then(res=>{
        this.air=res.data.data;
      })
    },
  },
  mounted() {
    var airId=this.$route.query.airId;
    console.log(airId)
    if (airId!=null){
      this.findById(airId);
    }
  }
}
</script>

<template>
    <div class="map-container">
        <el-row class="top">
            <el-col :span="16" style=""><img src="http://simg1.qunarzz.com/piao/images/tts/ocenter/tips_logo.png
">去哪儿网客户服务中心：95117（如在境外拨打，请加拨0086)</el-col>
            <el-col :span="8"><span>适老化及无障碍&nbsp;&nbsp;&nbsp;| &nbsp;&nbsp;去哪儿通行证 &nbsp;&nbsp;</span>
                <span>登录 &nbsp;&nbsp;&nbsp;| &nbsp;&nbsp;&nbsp;注册</span></el-col>
        </el-row>

        <div class="mp-section">
            <el-tag class="top1">1，填写信息</el-tag>
            <el-tag class="top1">2，在线支付</el-tag>
            <el-tag class="top1">3，安全飞行，确保无忧</el-tag>
        </div>
        <el-form >
          <div class="top2">
            <div>
              <el-row :ref="air" :model="air">
                <el-col :span="20" style="font-weight: bold;font-size: 30px">欢迎订购{{air.ariName}}机票</el-col>

              </el-row>
            </div>
            <div>
              <el-row>
                <el-col :span="8">航空公司：{{air.ariName}}</el-col>
                <el-col :span="8">飞机编号：{{air.airNumber}}</el-col>
                <el-col :span="8">舱位：{{air.airSpace}}</el-col>
              </el-row>
            </div>
            <div>
              <el-row>
                <el-col :span="8">起飞地址:{{air.airSaddr}}</el-col>
                <el-col :span="8">到达地址:{{air.airEaddr}}</el-col>
                <el-col :span="8" style="color: red">价格:￥{{air.airPrice}}</el-col>
              </el-row>
            </div>
            <div>
              <el-row>
                <el-col :span="8">起飞时间:{{air.airStime}}</el-col>
                <el-col :span="8">到达时间:{{air.airEtime}}</el-col>

              </el-row>
            </div>
            <div>
              <el-form :label-position="labelPosition" label-width="80px" :model="user">
                <el-form-item label="姓名">
                  <el-input  style="width: 400px" v-model="user.username"></el-input>
                </el-form-item>
                <el-form-item label="手机号码">
                  <el-input  style="width: 400px" v-model="user.userTel"></el-input>
                </el-form-item>
                <el-form-item label="身份证号">
                  <el-input style="width: 400px" v-model="user.usertype"></el-input>
                </el-form-item>
              </el-form>
              <el-checkbox v-model="checked">保存常用联系人</el-checkbox>
            </div>

            <div> <el-checkbox v-model="checked">我已阅读并接受合同条款、补充条款及其他所有内容
            </el-checkbox>
            </div>

            <div>
              <el-form :label-position="labelPosition" label-width="80px" >
                <el-form-item>
                  <el-button type="danger" round @click="onSubmit">提交订单</el-button>
                </el-form-item>
              </el-form>
            </div>

          </div>
        </el-form>

      <el-form :model="air">
        <div class="top2right">
          <div style="font-weight: bold;color: red;margin-left: 120px">购票须知</div>
          <div style="font-weight: bold;">退款限制</div>
          <div> 起飞时间截止前可以申请改签</div>
          <div style="font-weight: bold;">航班信息</div>
          <div>航空公司名称：{{ air.ariName }}</div>
          <div>起飞时间：{{ air.airStime }}</div>


          <div>订单总额：￥{{air.airPrice}}（1/张）</div>
        </div>
      </el-form>


    </div>
</template>

<style scoped>
.map-container{
    background-image: url('../assets/2.jpg');
    background-size: cover;
    background-position: center center;
//opacity: 0.9;
    width: 100%;
    height: 700px;
}
.el-row {
    margin-bottom: 0px;
    &:last-child {
        margin-bottom: 0;
    }
}
.top{
    font-size: 14px;
    background-color: #f4f4f4;
    min-height: 36px;
    border-radius: 4px;
}
.top1 {
    width: 250px;
//text-indent: 70px;
    background: #00bcd4;
//border-radius: 5px 0 0 5px;
    color: #fff;
    font-size: 16px;

}
.mp-section{
    width: 1190px;
//margin: 0 auto;
    margin-top: 20px;
    margin-left: 480px;
    font-size: 20px;
    font-family: "Hiragino Sans GB","微软雅黑",Tahoma,Arial,sans-serif;
}
.top2{
    margin-top: 20px;
    margin-left: 200px;
    width: 800px;
    height: 500px;
    border: 3px solid white;
//background-color: silver;
}
.top2right{
    width: 300px;
    height: 400px;
    border: 3px solid white;
//background-color: gold;
    margin-left: 1050px;
    margin-top: -500px;
}
</style>
